<template>
    <div class="breadcrumb" separator="/">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item v-for="(item, index) in breadlist" :to="item.path" :key="index">{{item.name}}</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
</template>

<script>
    export default {
        created() {
            this.getBreadcrumb();
        },
        data() {
            return {
                breadlist: '' // 路由集合
            }
        },
        methods: {
            getBreadcrumb() {
                var breadNum = this.$route.path.split('/').length - 1
                var breadNumber = breadNum || 1; //url变量breadNum记录层级，默认为1，如果大于1，要添加上变量；
                var breadLength = this.$store.state.breadListState.length; //目前breadlist集合数组个数
                var curName = this.$route.name;
                var curPath = this.$route.fullPath;
                var newBread = {
                    name: curName,
                    path: curPath
                };
                var ishome = curName == '首页';
                if (breadNumber === 1) {
                    this.$store.commit('breadListStateClear');
                    this.$store.commit('breadListStateAdd', newBread);
                } else if (breadNumber === 2) {
                    if (breadLength > 1) {
                        this.$store.commit('breadListStateRemove', 1);
                    }
                    if(this.$route.path.split('/')[2] === 'new') {
                        newBread.name = '新增'
                    } else if (this.$route.path.split('/')[2] === 'edit') {
                        newBread.name = '编辑'
                    } else {
                        newBread.name = this.$store.getters.carrier.carrier
                    }
                    this.$store.commit('breadListStateAdd', newBread);
                }
                // if (breadNumber === 1) { //点击一级菜单
                //     this.$store.commit('breadListStateRemove', 1); //初始化，只有首页面包屑按钮
                //     if (!ishome) //如果不是首页
                //         this.$store.commit('breadListStateRemove', 1);
                //         this.$store.commit('breadListStateAdd', newBread); //当前页面添加到breadlist集合
                // } else if (breadLength <= breadNumber) { //如果不是一级导航，并且breadlist集合个数等于或者小于目前层级
                //     this.$store.commit('breadListStateAdd', newBread); //要把当前路由添加到breadlist集合
                // } else {
                //     this.$store.commit('breadListStateRemove', parseInt(breadNumber) + 1); //如果往回点面包屑导航，截取；
                // }
                this.breadlist = this.$store.state.breadListState;
            }
        },
        watch: {
            $route() {
                this.getBreadcrumb();
            }
        },
    }
</script>

<style lang="scss" scoped>
    .breadcrumb {
        background: #f9f9f9;
        .el-breadcrumb {
            font-size: 18px;
            padding: 15px 10px;
            color: #505458;
            font-weight: 500;
        }
    }
</style>

